<template>
  <div>
    <div style="width: 100%; height: 10px;"></div>
    <span style="font-weight:bold;color:black">比较示意图</span>
    <div style="width: 100%; height: 10px;"></div>
    <v-chart class="chart" :option="option" autoresize />
  </div>
</template>

<script setup>
import { use } from 'echarts/core';
import { TitleComponent, LegendComponent } from 'echarts/components';
import { RadarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { ref, onMounted ,watchEffect} from 'vue';
import axios from 'axios'; // 导入 axios

import VChart from "vue-echarts";

const props = defineProps({
  StuId: String
});

const studentId = props.StuId;
console.log('This is Id in StuCompare:', studentId);
// 发送请求获取学生信息

use([
  TitleComponent,
  LegendComponent,
  RadarChart,
  CanvasRenderer
]);


const average_learned_hour = ref(1000);
const average_loaded_day = ref(100);
// const average_score = ref(80.468663117844574);
const average_score = ref(50);
const average_finishedTasks= ref(20.468663117844574);
const average_diversity= ref(3);

const stu_learned_hour = ref(0);
const stu_loaded_day = ref(0);
const stu_score = ref(80);
const stu_finishedTasks = ref(0);
const stu_diversity = ref(5);
const hour=Math.min(studentId*studentId-studentId,1000*2.5);

const option = ref({
  legend: {
    data: ['全站平均', '学生表现'],
    itemstyle: { color: 'black' },
  },
  radar: {
    indicator: [
      { name: '学习时长', max: 1000*2.5, color: 'black' },
      { name: '学习成绩', max: 100, color: 'black' },
      { name: '平均站龄', max: average_loaded_day.value * 2.5, color: 'black' },
      { name: '完成任务数', max: average_finishedTasks.value * 2.5, color: 'black' },
      // { name: '完成任务数', max:Math.max(average_finishedTasks.value * 2.5, stu_finishedTasks.value), color: 'black' },
      { name: '画像丰富度', max: average_diversity.value * 2.5, color: 'black' },
    ]
  },
  series: [
    {
      name: 'Budget vs spending',
      type: 'radar',
      data: [
        {
          value: [
            average_learned_hour.value,
            average_score.value,
            average_loaded_day.value,
            average_finishedTasks.value,
            average_diversity.value,
          ],
          name: '全站平均',
        },
        {
          value: [
            // stu_learned_hour.value,
            hour,
            stu_score.value,
            stu_loaded_day.value,
            stu_finishedTasks.value,
            stu_diversity.value
          ],
          name: '学生表现'
        }
      ]
    }
  ]
});



onMounted(() => {
  axios.get(`http://localhost:8080/Stu/StuBasic?studentId=${studentId}`)
    .then(response => {
      const data = response.data; // 根据实际数据结构获取数据
      // 更新全站平均数据

      // 更新学生表现数据
      stu_learned_hour.value = data.avgStudyTime / 3600; // 将秒转换为小时
      stu_loaded_day.value = Math.min(data.avgLoginDays,200); // 根据实际数据结构获取学生的平均站龄
      stu_score.value = Math.max(40,data.avgScore);
      // stu_finishedTasks.value = data.taskFinished;
      stu_finishedTasks.value = Math.min(data.taskFinished, 40);


      // 如果需要计算学生的画像丰富度，可以在这里添加相应的计算逻辑
      // 输出学生表现数据到命令行
      console.log("学生学习时长（小时）: ", stu_learned_hour.value);
      console.log("学生平均站龄（天）: ", stu_loaded_day.value);
      console.log("学生平均成绩: ", stu_score.value);
      console.log("学生完成任务数量: ", stu_finishedTasks.value);
    })
    .catch(error => {
      console.error('请求失败：', error);
    });
});

// 监听学生表现数据的变化，并更新 option 对象中的数据
watchEffect(() => {
  option.value.series[0].data[1].value = [
    // stu_learned_hour.value,
    hour,

    stu_score.value,
    stu_loaded_day.value,
    stu_finishedTasks.value,
    stu_diversity.value
  ];
});

</script>

<style scoped>
.chart {
  width: 100%;
  height: 400px;
}
</style>
